<template>
  <div class="app_content_container">
    <Breadcrumb style="padding-left: 16px" :items="['集群列表']" />
    <FilterTabs v-model="activeKey" :list="appTypeList" />
    <LayoutCard style="padding: 0 16px">
      <treeList @bizModelSelect="bizModelSelect" />
      <template #content>
        <clusterList ref="baseTableRef" />
      </template>
    </LayoutCard>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import treeList from "./tree-list.vue";
import clusterList from "./cluster-list.vue";
import { appTypeList } from "@/constant";

// 处理方法
const baseTableRef = ref();
const activeKey = ref();
const emits = defineEmits(["bizModelSelect"]);
const bizModelSelect = (val) => {
  baseTableRef.value.onBizModelSelect(val);
};
</script>
<style lang="scss" scoped>
.app_content_container {
  padding: 0;
}
:deep(.garco-tabs-nav-tab) {
  margin: 0 !important;
  border: none !important;
}
.layout_card {
  height: calc(100vh - 156px) !important;
}
</style>
